<!-- home -->
<template>
  <div class="container">

    <van-nav-bar
      title="客户列表"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-sticky>
      <van-search v-model="name" placeholder="请输入搜索关键词" @search="queryYwyCustomer"/>
      <van-cell  title="选择客户级别"  title-class="titleclass"   v-model="khjbname" center is-link @click="showKhjb" />
      <van-cell  title="选择客户状态"  title-class="titleclass"   v-model="khztname" center is-link @click="showKhzt" />
    </van-sticky>

    <van-cell-group v-for="item in customerList " :key="item.recordid">
      <div style="margin-top: 10px;">
        <van-cell @click="selectCustomer(item)" is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div style="display: flex;flex-direction: row">
              <div>
                <span style="font-size: 16px;font-weight: bold">{{ item.name }}</span>
                <van-tag type="primary" style="margin-left: 10px;">{{item.khjb == '1' ? 'A类(重点客户)': item.khjb == '2' ? 'B类(普通客户)':'C类(非优先客户)' }}</van-tag>
              </div>

            </div>

            <div style="padding-top: 5px;">
              联系方式：{{item.telephone }}
            </div>

            <div style="padding-top: 5px;">
              所在地：{{item.provincename + item.cityname + item.countyname }}
            </div>

          </template>
        </van-cell>
      </div>

    </van-cell-group>

    <van-popup
      v-model:show="viewShow"
      round
      closeable
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div style="padding-left: 20px;padding-top: 10px;padding-bottom: 10px;font-size: 14px;">选择客户跟进状态：</div>
      <div style="padding: 20px;">
        <van-radio-group v-model="khzt">
          <van-radio name="1" style="padding: 5px;padding-left: 20px;">初步接洽</van-radio>
          <van-radio name="2" style="padding: 5px;padding-left: 20px;">持续跟进</van-radio>
          <van-radio name="3" style="padding: 5px;padding-left: 20px;">达成成交</van-radio>
          <van-radio name="4" style="padding: 5px;padding-left: 20px;">输单</van-radio>
        </van-radio-group>
      </div>

      <van-field
        v-model="bz"
        required
        label-width="15%"
        label="备注："
        placeholder="请输入备注"
        type="textarea"
      />

      <div style="padding-left: 30px;padding-right: 30px;">
        <van-button type="info" size="large" round @click="doUpdate" >提交</van-button>
      </div>

    </van-popup>

    <van-action-sheet v-model="jbShow" :actions="actions" @select="onSelectKhjb" />
    <van-action-sheet v-model="khztShow" :actions="khztActions" @select="onSelectKhzt" />

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'
import eventBus from '../../utils/eventbus'
import { queryUserInfo, queryYwyCustomer, updateCustomer } from '../../api/api'

export default {
  name: 'CustomerList',
  data() {
    return {

      pageNum: 1,
      pageSize: 10,
      date: '',
      show: false,
      dateshow: false,
      minDate: new Date(2021, 1, 1),
      ywyname: '',
      bz: '',
      currentDate: new Date(),
      planid: '',
      content: '',
      actions: [{ id: '', name: '请选择' }, { id: '1', name: 'A(重点客户)' }, { id: '2', name: 'B(普通客户)' }, { id: '3', name: 'C(非优先客户)' }],
      khztActions: [{ id: '', name: '请选择' }, { id: '1', name: '初步接洽' }, { id: '2', name: '持续跟进' }, { id: '3', name: '达成成交' }, { id: '4', name: '输单' }],
      typename: '',
      jdShow: false,
      value: 0,
      jobShow: false,
      type: '',
      jobContent: '',
      khsl: '',
      jobtypename: '请选择',
      jobtype: '',
      jobRecordList: [],
      viewShow: false,
      customerList: [],
      pjnr: '',
      khzt: '',
      custid: '',
      jbShow: false,
      khztShow: false,
      khztSearch: '',
      khjb: '',
      name: '',
      khjbname: '',
      khztname: ''

    }
  },

  created() {
    this.queryUserInfo()
    var day3 = new Date()
    var s3 = day3.getFullYear() + '-' + (day3.getMonth() + 1) + '-' + day3.getDate()
    this.currentDate = day3
    this.date = s3
  },
  mounted() {

  },

  methods: {

    selectCustomer(item) {
      const data = { custid: item.custid, name: item.name }
      eventBus.$emit('customerInfo', item)
      // 调用router回退页面
      this.$router.back()
    },

    showKhjb() {
      this.jbShow = true
    },

    showKhzt() {
      this.khztShow = true
    },

    onSelectKhjb(item) {
      this.khjbname = item.name
      this.khjb = item.id
      this.jbShow = false
      this.queryYwyCustomer()
    },

    onSelectKhzt(item) {
      this.khztname = item.name
      this.khztSearch = item.id
      this.khztShow = false
      this.queryYwyCustomer()
    },

    showDialog(item) {
      this.viewShow = true
      this.khzt = item.khzt
      this.custid = item.custid
    },

    queryYwyCustomer() {
      const param = { ywyname: this.ywyname, khzt: this.khztSearch, khjb: this.khjb, name: this.name }
      queryYwyCustomer(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          this.customerList = list
          console.log(list)
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    showJobDialog() {
      this.jobShow = true
    },

    showType() {
      this.show = true
    },

    onSelectType(item) {
      this.jobtype = item.id
      this.jobtypename = item.name
      this.show = false
    },

    onConfirmJd() {
      const param = { planid: this.planid, wcjd: this.value }

      updateJobplan(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '进度更新成功'
          }).then(() => {
            // on close
            this.jdShow = false
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onCancelJd() {
      this.jdShow = false
    },

    showJdDialog() {
      this.jdShow = true
    },

    queryJobrecord() {
      const param = { ssrq: this.date, userid: this.userid, ywyname: this.ywyname }
      const that = this
      listJobrecord(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          that.jobRecordList = list
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryJobplan() {
      const param = { ssrq: this.date, userid: this.userid, ywyname: this.ywyname }
      const that = this
      listJobplan(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          const actions = that.actions
          if (list && list.length > 0) {
            that.content = list[0].content
            that.type = list[0].type
            that.szdz = list[0].szdz
            that.value = list[0].wcjd
            for (var i = 0; i < actions.length; i++) {
              if (actions[i].id == list[0].type) {
                that.typename = actions[i].name
              }
            }
            that.planid = list[0].planid
          } else {
            that.content = ''
            that.type = ''
            that.szdz = ''
            that.typename = '请选择'
            that.planid = ''
            that.value = 0
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryUserInfo() {
      const param = {}
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.ywyname = response.data.name
          this.userid = response.data.userid
          this.queryYwyCustomer()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryYwyPlan()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}-${date1.getMonth() + 1}-${date1.getDate()}`
    },

    showFblx() {
      this.show = true
    },

    showDklx() {
      if (!this.ywlx) {
        Dialog.alert({
          title: '',
          message: '先选择业务类型'
        })
        return
      }
      this.dklxshow = true
    },

    doUpdate() {
      const param = { custid: this.custid, khzt: this.khzt, bz: this.bz }
      updateCustomer(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '更新成功'
          }).then(() => {
            // on close
            this.viewShow = false
            this.queryYwyCustomer()
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    }

  }
}
</script>
<style lang="scss" scoped>

.container{
  width: 100%;
  height: calc(100vh);
}

.btn{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  background-color: white;
  padding-bottom: 150px;
}

.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}

</style>
